<template>
  <div>
    <header>
      <el-form inline @submit.native.prevent ref="searchForm" :model="form">
        <el-form-item label="企业名称" prop="uscCode" class="base-search__form-item">
          <el-select v-model="form.uscCode" filterable>
            <el-option
              v-for="(item, index) in tenantNameList"
              :key="index"
              :label="item.tenantName"
              :value="item.uscCode"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="common-search__footer">
          <span @click="reset">重置</span>
          <span @click="submit">搜索</span>
        </el-form-item>
      </el-form>
    </header>
    <nav class="common-nav mb30">
      <h2 class="common-nav__title tab_active" v-for="(item, index) in navList" :key="index">
        {{ item.name }}
      </h2>
    </nav>
    <BaseTable v-if="isInit" :columns="columns" v-bind="table"></BaseTable>
    <Empty v-if="!isInit"></Empty>
  </div>
</template>

<script>
import BaseTable from '@/components/BaseTable/index.vue'
import Empty from '@/components/Empty/index.vue'
import { ORDER_STATUS } from '@/constants/auditModel.js'

export default {
  name: 'jfsDataList',
  components: {
    BaseTable,
    Empty,
  },
  data() {
    return {
      // 初始化时空白页
      isInit: 0,
      navList: [{ name: '订单数据', id: 0 }],
      columns: [
        { label: '企业名称', prop: 'tenantName' },
        { label: '订单日期', prop: 'createdAt' },
        { label: '订单编号', prop: 'purOrderNumber' },
        { label: '供应商', prop: 'customerName' },
        { label: '采购商', prop: 'companyName' },
        {
          label: '状态',
          prop: 'paymentStatus',
          render: (val, row) => {
            return <span>{ORDER_STATUS[row.paymentStatus]}</span>
          },
        },
        { label: '订单金额', prop: 'salesTotalAmount' },
      ],
      tenantNameList: [],
      form: {
        uscCode: '',
      },
      table: {
        pagination: {
          pageNo: 1,
          pageSize: 10,
          total: 0,
        },
        data: [],
        onChange: pagination => {
          if (!this.form.uscCode) {
            this.$message.warning('请输入搜索条件')
            return
          }

          Object.assign(this.table.pagination, pagination)
          this.isInit++
          this.getListRequest(this.table.pagination)
        },
      },
    }
  },
  methods: {
    submit() {
      if (!this.form.uscCode) {
        this.$message.warning('请输入搜索条件')
      } else {
        this.isInit++
        this.table.pagination.pageNo = 1
        this.getListRequest()
      }
    },
    reset() {
      this.$refs.searchForm.resetFields()
    },
    async getListRequest() {
      const res = await this.$http.get('/data_center/orders', {
        params: {
          uscCode: this.form.uscCode,
          current: this.table.pagination.pageNo,
          limit: this.table.pagination.pageSize,
        },
      })

      this.table.data = res.records
      this.table.pagination.total = res.total
    },
    async getTenantNameListRequest() {
      const res = await this.$http.get('/ents/list', { isLoading: false })
      this.tenantNameList = res
    },
  },
  mounted() {
    this.getTenantNameListRequest()
  },
}
</script>

<style lang="scss" scoped>
.common-search__footer {
  span {
    display: inline-block;
    text-align: center;
    border-radius: 1px;
    width: 136px;
    height: 36px;
    line-height: 36px;
    cursor: pointer;
    &:first-child {
      border: 1px solid $blue;
      color: $blue;
      margin-right: 10px;
    }
    &:last-child {
      background: $blue;
      color: $white;
      border: 1px solid transparent;
    }
  }
}
::v-deep {
  .base-search__form-item {
    margin-right: 40px;
  }
  .el-input {
    width: 260px;
  }
}
</style>
